import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button, Tooltip } from 'antd';
import { WeaTab, WeaTop, WeaRightMenu,WeaLocaleProvider } from 'ecCom';
import MoreSearch from './MoreSearch';
import OrganizationView from './OrganizationView';
import PersonView from './PersonView';
import * as Util from '../../../util/Util';
const getLabel = WeaLocaleProvider.getLabel;
@inject('planReportDiagramStore')
@observer
export default class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      _height: Util.getCurrentHeight(),
      heightInit: false,
      tabShowSearch: false,
      topTab: [
        { title: getLabel('382619','按组织') , viewcondition: 2 },
        { title: getLabel('382620','按人员'), viewcondition: 1 },
      ],
    };
    this.store = this.props.planReportDiagramStore;
  }
  componentWillMount() {
    //一些初始化请求
    this.resetSearchAd()
    this.store.selectTabKey="2"
    this.store.getYearList();
    this.store.planReportDiagram();
    //this.store.planWorkerReportDiagram();
    this.store.showCharts=false
    this.store.selectedRowValues=[]
    this.store.selectedRowKeys=[]
    //设置windowkey
    Util.setWindowKeys("5",getLabel (505886, '报告报表'));

  }

  componentDidMount() { }

  componentWillReceiveProps(nextProps) { 
  //设置windowkey
  Util.setWindowKeys("5",getLabel (505886, '报告报表'));
  }

  getHeight(header) {
    let h = 0;
    if (header) {
      h = header.clientHeight || 0;
    }
    return window.innerHeight - h;
  }

  getTopConfig = () => {
    return {
      title: getLabel('505886','报告报表') ,
      icon: <i className="icon-coms-implement" />,
      iconBgcolor: 'rgb(150, 53, 138)',
      showDropIcon: true,
      buttons: this.getButton(),
      dropMenuDatas:this.getMenu()
    };
  };

  getButton() {
    let {
      selectTabKey,
      showCharts,
      showChart,
      changeShowCharts,
      selectedRowValues,
    } = this.store;
    let buttons = [];
    if (selectTabKey == '2' && !showCharts) {
      buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@4ell7q@viewchart`} type='primary' disabled={selectedRowValues.length == 0} onClick={() => showChart()}>{getLabel('382617','查看图表') }</Button>);
    } else if (selectTabKey == '2' && showCharts) {
      buttons = [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@t4z43j@backlist`} type='primary' onClick={() => changeShowCharts()}>{getLabel('31088','返回列表') }</Button>];
    }
    if(!showCharts){
      buttons.push(
        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@qg1osk@importdata`} title={getLabel(27648, '导出报表') }>
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@cs37c8@exportdata`}
            type="primary"
            loading={this.store.exportLoading}
            disabled={this.store.exportLoading}
            onClick={() => {
              this.store.selectTabKey == '1'
                ? this.store.personExport()
                : this.store.orgExport();
            }}
          >
            {getLabel(27648, '导出报表')}
          </Button>
        </Tooltip>
      );
    }
    return buttons;
  }

  //获取菜单
  getMenu() {
    let {
      selectedRowValues,
      selectTabKey,
      showCharts,
      showChart,
      changeShowCharts,
    } = this.store;
    
    let menus = []
    if (selectTabKey === '2' && !showCharts && selectedRowValues.length > 0) {
      menus.push({
        key: '1',
        icon: <i className="icon-coms-Bar" />,
        content: getLabel('382617','查看图表'),
        onClick: () => showChart(),
      });
    } else if (selectTabKey === '2' && showCharts) {
      menus.push({
        key: '2',
        icon: <i className="icon-coms-Return" />,
        content: getLabel('31088','返回列表') ,
        onClick: () => changeShowCharts(),
      });
    }
    menus.push({
      key: '3',
      icon: <i className="icon-coms-export" />,
      content: getLabel(27648, '导出报表') ,
      onClick: () => {
        this.store.selectTabKey == '1'
          ? this.store.personExport()
          : this.store.orgExport();
      },
    });
    return menus;
  }

  onTabChange = v => {
    this.store.selectTabKey = v;
    this.store.showCharts=false
    this.store.selectedRowValues=[]
    this.store.selectedRowKeys=[]
    if (v == '1') {
      this.store.moreSearchValues = {
        subType: "3",
        depType: "3"
    }
      this.store.planWorkerReportDiagram();
    } else {
     // this.store.planReportDiagram();
    }
  };

  cancelSearch = b => {
    this.store.tabShowSearch = b;
  };

  getTabButtonsAd() {
    let tabButtons = []
      tabButtons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@p7y77k@search`} type="primary" onClick={() => this.searchResult()}>{getLabel('388113','搜索')  }</Button>)
      tabButtons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ujir3m@reset`} type="ghost" onClick={() => this.resetSearchAd()}>{getLabel('2022','重置') }</Button>)
      tabButtons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6k0mrs@cancel`} type="ghost" onClick={() => this.cancleSearchAd(false)}>{getLabel('31129','取消')}</Button>)
    return tabButtons
  }

  searchResult = () => {
    this.store.personPage.pageNum = 1;
    this.store.planWorkerReportDiagram();
    this.cancleSearchAd();
  };

  resetSearchAd = () => {
    this.store.moreSearchValues = {subType:"3",
    depType:"3"};
    this.store.personPage.pageNum = 1;
    
    // this.searchResult();
  };

  cancleSearchAd = () => {
    this.setState({
      tabShowSearch: false,
    });
  };

  getSearchsAd = () => {
    return (
      <div className="condition-search-container">
        <MoreSearch ecId={`${this && this.props && this.props.ecId || ''}_MoreSearch@x99t7f`} />
      </div>
    );
  };
  getTabConfig = () => {
    return {
      datas: this.state.topTab,
      searchType: this.store.selectTabKey == '1' ? ['advanced'] : [],
      showSearchAd: this.state.tabShowSearch,
      keyParam: 'viewcondition',
      selectedKey: this.store.selectTabKey,
      hideSearchAd: this.cancelSearch,
      setShowSearchAd: b => {
        this.setState({ tabShowSearch: b });
      },
      hideSearchAd: () => {
        this.setState({ tabShowSearch: false });
      },
      onChange: this.onTabChange,
      buttonsAd: this.getTabButtonsAd(), //高级搜索的button
      searchsAd: this.getSearchsAd(), //高级搜索的组件
    };
  };
  onContextClick = () => {
    this.store.locationkey = new Date ().getTime ();
    this.store.monthWeekSelectComDisplayKey = 'none';
  };
  render() {
    let { _height } = this.state;

    return (
      <div className="wea-workrelate-plan-diagram" onClick={this.onContextClick}>
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@j9av9w`} style={{height:'100%'}} datas={this.getMenu()} collectParams={{
        favname:getLabel (505886, '报告报表') ,
        favouritetype: 5,
        link: '/spa/workrelate/static/index.html?#/main/workrelate/plan/planIndex?menutype=5',
        importantlevel: 1,
    }}>
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@0cviji`} {...this.getTopConfig()} />
          <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@rr2vj0`} {...this.getTabConfig()} />
          {/* <WeaNewScroll     height={_height-130}> */}

          {this.store.selectTabKey == '2'
            ? <OrganizationView ecId={`${this && this.props && this.props.ecId || ''}_OrganizationView@oxj8v5`} />
            : <PersonView ecId={`${this && this.props && this.props.ecId || ''}_PersonView@dsax5a`} />}
          {/* </WeaNewScroll> */}
        </WeaRightMenu>
      </div>
    );
  }
}
